<template>
	<view class="l-page">
		<view class="banner-container">
			<image src="/static/index/banner.png" mode=""></image>			
		</view>
		<view class="container-div flex-column">
			<view class="search flex-space-between">
				<input type="text" placeholder="请输入当前困扰或者咨询师"  v-model="keyword" class="inputBox"/>
				<view class="btnBg searchBtn" @click="searchBtn()">搜索</view>
			</view>
			<view class="flex-space-between search-box">
				<view class="search-row" v-for="(item,index) in topList" :key="index" >
					<image :src="item.image" mode="" class="topImg"></image>
					<p class="flex"><em></em> {{item.name}} <em></em></p>
				</view>
				
			</view>
			
			
		</view>
		<view class="bodyBg indexBox">
			<view class="container-div flex-column">
				<view class="container-title">
					<image src="../static/index/title1.png" mode="" class="titleImg"></image>
				</view>
				<view class="goodNav flex-align widthBg">
					<view class="goodnavRow" v-for="(itemg,indexg) in goodNav" :key="indexg" :class="navGood==indexg?'active':''" 
					@click="checkIndex(indexg,itemg.id)">
						<p>{{itemg.name}}</p>
						<em></em>
					</view>
				</view>
				<view class="goodList flex-space-between flex-wrap">
					<view class="widthBg listRow flex-row" v-for="(item,index) in goodList.slice(0, 2)" :key="index">
						<image :src="item.filepath" mode="" class="goodImg"></image>
						<view class="goodTxt">
							<view class="p flex-space-between">
								<h5>{{item.name}}</h5>
								<view class="addicon flex">
									<image src="../static/index/icon.png" mode="" class="iconAdd"></image>
									{{item.position}}
								</view>
							</view>
							<view class="explain line-clamp">{{item.qualifications}}</view>
							<view class="label flex-wrap">
								<view class="labelLi"  v-for="(items,indexs) in item.goodFiledList" :key="indexs">{{items}}</view>
							</view>
							<view class="typeBox flex-wrap">
								<view class="typeli"  v-for="(itemt,indext) in item.consultTypeList" :key="indext">{{itemt}}/</view>
							</view>
						</view>
					</view>
					<view class="stationMap">站位图</view>
					<view class="stationMapfr">
						<view class="widthBg listRow flex-row" v-for="(item,index) in goodList.slice(2, 4)" :key="index">
							<image :src="item.filepath" mode="" class="goodImg"></image>
							<view class="goodTxt">
								<view class="p flex-space-between">
									<h5>{{item.name}}</h5>
									<view class="addicon flex">
										<image src="../static/index/icon.png" mode="" class="iconAdd"></image>
										{{item.position}}
									</view>
								</view>
								<view class="explain line-clamp">{{item.qualifications}}</view>
								<view class="label flex-wrap">
									<view class="labelLi"  v-for="(items,indexs) in item.goodFiledList" :key="indexs">{{items}}</view>
								</view>
								<view class="typeBox flex-wrap">
									<view class="typeli"  v-for="(itemt,indext) in item.consultTypeList" :key="indext">{{itemt}}/</view>
								</view>
							</view>
						</view>
					</view>
					<view class="btnBg goodBtn">查看更多 ></view>
				</view>
			</view>
		</view>
		
		<view class="container-div flex-column testBox">
			<view class="container-title">
				<image src="../static/index/title2.png" mode="widthFix" style="width:286px;height: 86px;" class="titleImg"></image>
			</view>
			<view class="deploy-container flex-space-between flex-wrap">
				<view class="deploy-item flex-align widthBg" v-for="(itemy,indexy) in typeList" :key="indexy">
					<image :src="itemy.coverPath" mode="" class="imgType"></image>
					<view class="dayFr">
						<h2 class="line-clamp">{{itemy.name}}</h2>
						<p class="txtlinet line-clamp">{{itemy.shortInfo}}</p>
						<view class="flex-space-between dayFrbot">
							<view class="flex botTop">
								<image src="../static/index/icon8.png" mode="" class="iconImg"></image>								
								<span>{{itemy.evaNum}}人</span>
								<em >已测</em>
							</view>
							<view class="label price" v-if="itemy.chargeNot==0">免费</view>
							<view class="label price" v-else>￥{{itemy.charge}}</view>
							<image src="../static/index/goicon.png" mode="" class="goImg"></image>
						</view>
					</view>					
				</view>				
			</view>
			
			<view class="container-title" style="margin-top: 40px;">
				<image src="../static/index/title3.png" mode="widthFix" style="width:246px;height: 86px;" class="titleImg"></image>
			</view>
			<view class="deploy-container flex-space-between flex-wrap">
				<view class="deploy-item flex-align widthBg" v-for="(itemy,indexy) in typeList" :key="indexy">
					<image :src="itemy.coverPath" mode="" class="imgType"></image>
					<view class="dayFr">
						<h2 class="line-clamp">{{itemy.name}}</h2>
						<p class="txtlinet line-clamp">{{itemy.shortInfo}}</p>
						<view class="flex-space-between dayFrbot">
							<view class="flex botTop">
								<image src="../static/index/icon8.png" mode="" class="iconImg"></image>								
								<span>{{itemy.evaNum}}人</span>
								<em >已测</em>
							</view>
							<view class="label price" v-if="itemy.chargeNot==0">免费</view>
							<view class="label price" v-else>￥{{itemy.charge}}</view>
							<image src="../static/index/goicon.png" mode="" class="goImg"></image>
						</view>
					</view>
					
				</view>
				
			</view>
		</view>
		
		<view class="bodyBg indexBox">
			<view class="container-div flex-column">
				<view class="container-title">
					<image src="../static/index/title4.png" mode="" style="width:246px;height: 86px;" class="titleImg"></image>
				</view>
				<view class="aboutBox flex-align widthBg">
					<p>
						易职场是向学、职场和创业者的职业发展平台，通过提供信息咨询、测评等服 务，帮助解决职场困扰，少弯路，发挥优势。 M “让每个职场都能                      发挥优势”，是易职场的使命，也是易职场存在的理由。在“内卷” 还是“躺平”之间，我们尝试为职场提供第三种选择，即寻找两者之间的平衡，实现职 业涯的游刃有余和掌控感。 我们期望通过帮助提升职场的幸福感，进提价值创造的效率，最终为推动经济质量发展贡献份量。
					</p>
				</view>
			</view>
		</view>
		
		<foot-bar></foot-bar>
		<right-btn></right-btn>
	</view>
</template>

<script>
	/**
	 * 程序启动页
	 * */
	import footBar from "@/pages/bottom/foot-bar.vue"
	import rightBtn from "@/pages/right/right-btn.vue"
	export default {
		components: {
			footBar,
			rightBtn
		},
		data() {
			return {
			   navGood:'0',
               keyword:'',
			   topList:[
				   {
					   image:'/static/index/top1.png',
					   name:'严选高管'
				   },
				   {
					   image:'/static/index/top2.png',
					   name:'咨询透明'
				   },
				   {
					   image:'/static/index/top3.png',
					   name:'随改随退'
				   },
				   {
					   image:'/static/index/top4.png',
					   name:'平台保障'
				   }
			   ],
			   goodNav:[
				   {
					   name:'职业发展',
					   id:0,
				   },
				   {
					   name:'专业技能',
					   id:1,
				   },
				   {
					   name:'压力应对',
					   id:2,
				   },
				   {
					   name:'心里健康',
					   id:3,
				   }
			   ],
			   goodList:[
				   {
					filepath:'/static/index/imgs.png',
					name:'优秀老师',
					position:'上海',
					qualifications:'高校心理咨询中心主任 | 国家二级心理咨…',
					goodFiledList:['模拟考试','职业规划','求职面试'],
					consultTypeList:['视频','语音咨询'],
					id:"0"
				   },
				   {
					filepath:'/static/index/imgs.png',
					name:'优秀老师',
					position:'上海',
					qualifications:'高校心理咨询中心主任 | 国家二级心理咨…',
					goodFiledList:['模拟考试','职业规划','求职面试','模拟考试','职业规划','求职面试'],
					consultTypeList:['视频','语音咨询'],
					id:"1"
				   },
				   {
					filepath:'/static/index/imgs.png',
					name:'优秀老师',
					position:'上海',
					qualifications:'高校心理咨询中心主任 | 国家二级心理咨…',
					goodFiledList:['模拟考试','职业规划','求职面试'],
					consultTypeList:['视频','语音咨询'],
					id:"2"
				   },
				   {
					filepath:'/static/index/imgs.png',
					name:'优秀老师',
					position:'上海',
					qualifications:'高校心理咨询中心主任 | 国家二级心理咨…',
					goodFiledList:['模拟考试','职业规划','求职面试','模拟考试','职业规划','求职面试'],
					consultTypeList:['视频','语音咨询'],
					id:"3"
				   }
			   ],
			   typeList:[
				   {
					   coverPath:'/static/index/img1.png',
					   name:'MBTI职业性格测试(28题)',
					   shortInfo:'你的性格，适合什么样的工作？',
					   evaNum:'12',
					   chargeNot:'0',
					   charge:'123',
					   	id:"0"
				   },
				   {
					   coverPath:'/static/index/img2.png',
					   name:'MBTI职业性格测试(28题)',
					   shortInfo:'你的性格，适合什么样的工作？',
					   evaNum:'12',
					   chargeNot:'1',
					   charge:'123',
					   	id:"1"
				   },
				   {
					   coverPath:'/static/index/img3.png',
					   name:'MBTI职业性格测试(28题)',
					   shortInfo:'你的性格，适合什么样的工作？',
					   evaNum:'12',
					   chargeNot:'0',
					   charge:'123',
					   	id:"2"
				   },
				   {
					   coverPath:'/static/index/img4.png',
					   name:'MBTI职业性格测试(28题)',
					   shortInfo:'你的性格，适合什么样的工作？',
					   evaNum:'12',
					   chargeNot:'0',
					   charge:'123',
					   	id:"3"
				   }
			   ]
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('pageData', data => {
				console.log(data)
				// data即传过来的参数
			})
		},
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop);
		},
		onShow(params) {
		///	console.log(params)
		},
		methods: {
		
			checkIndex(index,id) {
				this.navGood = index
				
			},
			//点击搜索
			searchBtn(){
				console.log("点击搜索")
			},
			// 注册
			onRegister() {
				uni.navigateTo({
					url: '/pages/html'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner-container {
		width: 100%;
		height: 560px;	
	
		image{
			width: 100%;
			height:560px ;
		}
	}

	//搜索
	.search{
		box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.06);
		border-radius: 40px 40px 40px 40px;
		border: 1px solid #DBDBDB;		
		margin: 56px 0;
		height: 62px;
		.inputBox{
			padding:0 20px;
			color: $font-text-black;
			line-height: 62px;
			height: 62px;
		}
		.searchBtn{
			width: 13%;
			font-size: 22px;
			text-align: center;
			border-radius: 40px;			
			height: 62px;
			line-height: 62px;
			color: $font-text-white;
			border: 1px solid #DBDBDB;
			cursor: pointer;		
		}
	}
	.search-box{
		.search-row{
			width:248px;
			text-align: center;
			background: #F6F5FF;
			box-shadow: 0px 8px 24px 0px rgba(151,149,165,0.16);
			border-radius: 16px ;
			font-size: 24px;
			color: $font-text-black;
			padding-bottom: 20px;
			.topImg{
				width:204px;
				height: 204px;
			}
			em{
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: $maincolor;
				display: block;
				margin: 0 10px;
				
			}
		}
	}
//优秀咨询师
.indexBox{
	padding: 48px 0;
	margin-top: 40px;
	.titleImg{
		width: 286px;
		height: 86px;
		margin-bottom: 40px;
	}
	.goodNav{
		font-size: 20px;
		color: $font-text-blackA;
		margin-bottom:40px ;
		.goodnavRow{
			margin-left: 40px;
			cursor: pointer;
			em{
				width: 56px;
				height: 3px;
				background-color:#7919D5 ;
				display: block;
				margin-top: 10px;
				opacity: 0;
				margin-left: 15px;
			}
		}
		.active{
			color: #7919D5;
			font-size: 24px;
			transition: 0.5s;
			em{
				opacity: 1;
			}
		}
	}
	.goodList{
		.stationMap{
			width: 48%;
			height: 512px;
			margin-bottom: 40px;
			cursor: pointer;
			text-align: center;
			line-height: 512px;
			background-color: #fff;
			border-radius: 8px;
		}
		.stationMapfr{
			width: 48%;
			.listRow{
				width: 100%!important;
			}
		}
		.listRow{
			width: 48%;
			margin-bottom: 40px;
			cursor: pointer;
			.goodImg{
				width: 154px;
				height: 188px;
				margin-left: 20px;
				margin-right: 32px;
			}
			.goodTxt{
				width: 58%;
				.p{
					font-size: 12px;
					color: #767676;
					h5{
						font-size:24px;
						color: #3D3D3D;
					}
				}
				.explain{
					width: 100%;
					font-size:18px;
					color: #1A1A1A;
				}
				.label{
					margin-top: 10px;
					.labelLi{
						border-radius: 6px;
						padding: 2px 10px;
						border: 1px solid #DBDBDB;
						font-size: 14px;
						color: #767676;
						margin-bottom: 6px;
						margin-right: 10px;
					}
				}
				.typeBox{
					margin-top: 16px;
					color: #767676;
					font-size: 12px;
				}
			}
			.iconAdd{
				width: 12px;
				height: 12px;
				margin-right: 5px;
			}
		}
	}
	.goodBtn{
		width: 10%;
		text-align: center;
		border-radius: 4px;
		margin-left: 45%;
		margin-top: 30px;
		color: #fff;
		padding: 6px 0;
		font-size: 18px;
		cursor: pointer;
	}
}

//经典测评
.testBox{
	margin-top: 40px;
}
	
.deploy-container {
	width: 100%;	
	height: auto;	
	display: flex;
	margin-top: 40px;
}

.deploy-item {
	width: 48%;
	box-shadow: 0px 8px 24px 0px rgba(149,157,165,0.2);
	border-radius: 8px;
	margin-bottom: 20px;
	cursor: pointer;
	.imgType{
		width: 240px;
		height: 240px;
	}
	.iconImg{
		width:16px;
		height: 20px;
	}
	.goImg{
		width: 32px;
		height: 32px;
	}
	.dayFr{
		width: 50%;
		margin-left: 16px;
		h2{
			color: #3D3D3D;
			font-size: 24px;
		}
		.txtlinet{
			color: #767676;
			font-size: 18px;
		}
		.dayFrbot{
			margin-top: 20px;
			.botTop{
				font-size: 18px;
				color: #1A1A1A;
				span{
					padding-left: 12px;
				}
				em{
					color: #767676;
					padding-left: 12px;
				}
			}
			.price{
				font-size: 18px;
				color: #37D0C9;
			}
		}
		
	}
}

.deploy-title {
	margin-top: -80px;
	line-height: 30px;

	text {
		font-size: 24px;
		color: #333333;
	}
}

.deploy-title-fu {
	margin-top: 30px;

	text {
		font-size: 18px;
		color: #666666;
	}
}
	
	.container-title {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	
		text {
			font-size: 36px;
		}
	}
	.aboutBox{
		margin-bottom: 40px;
		p{
			width: 94%;
			margin: 0 3%;
			line-height: 40px;
			color: #3D3D3D;
			font-size: 20px;
		}
	}
</style>
